<template>
  <div>
    <div class="ad_title">较难达标项数</div>
  <t-table
    :table="table"
    :columns="table.columns"
    row-key="menuId"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    :defaultExpandAll="defaultExpandAll"
    isShowTreeStyle
    :isShowPagination="false"
  />
  </div>
</template>

<script>
import TreeData from "./tableData2.json";
export default {
  data() {
    return {
      defaultExpandAll: true, // 是否默认展开
      table: {
        border: true,
        data: [],
        columns: [
          {
            prop: "num",
            label: "指标序号",
            minWidth: "80",
          },
          {
            prop: "name",
            label: "指标项名称",
            minWidth: "240",
          },
          {
            prop: "department",
            label: "责任科室",
            minWidth: "100",
            align: "center",
          },
          {
            prop: "target",
            label: "2023目标值",
            minWidth: "100",
            align: "center",
          },
          {
            prop: "assessment",
            label: "上半年自评",
            minWidth: "100",
            align: "center",
          },
          {
            prop: "total",
            label: "国考得分",
            minWidth: "100",
          },
          {
            prop: "current",
            label: "国考满分",
            minWidth: "100",
          },
          {
            prop: "improve",
            label: "改进措施",
            minWidth: "400",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      const res = TreeData;
      if (res.success) {
        this.table.data = this.handleTree(res.data, "menuId");
      }
    },
    /**
     * 构造树型结构数据
     * @param {*} data 数据源
     * @param {*} id id字段 默认 'id'
     * @param {*} parentId 父节点字段 默认 'parentId'
     * @param {*} children 孩子节点字段 默认 'children'
     * @param {*} rootId 根Id 默认 0
     */
    handleTree(data, id, parentId, children, rootId) {
      id = id || "id";
      parentId = parentId || "parentId";
      children = children || "children";
      rootId = rootId || 0;
      // 对源数据深度克隆
      const cloneData = JSON.parse(JSON.stringify(data));
      // 循环所有项
      const treeData = cloneData.filter((father) => {
        let branchArr = cloneData.filter((child) => {
          // 返回每一项的子级数组
          return father[id] === child[parentId];
        });
        // eslint-disable-next-line no-unused-expressions
        branchArr.length > 0 ? (father.children = branchArr) : "";
        // 返回第一层
        return father[parentId] === rootId;
      });
      return treeData !== "" ? treeData : data;
    },
  },
};
</script>

<style lang="scss" scoped>

.ad_title {
  font-size: 14px;
  font-weight: 600;
  font-family: "Montserrat";
  color: #333333;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-left: 14px;
  position: relative;

  &:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 12px;
    background: #0783ff;
    left: 0;
    margin: auto;
  }
}

:deep(.el-table .el-table__header-wrapper th.el-table__cell ){
  border-right: 1px solid #dfe6ec !important;
  border-bottom: 1px solid #dfe6ec !important;
}

:deep(.el-table .el-table__header-wrapper th) {
  background-color: #f5f7fa !important;
}

:deep(.el-table .el-table__header-wrapper th.el-table__cell>.cell) {
  color: #606266 !important;
}
</style>
